
<template>
  <!--
  查：
      1：定义api
      2:导入api
      3:调用api获取数据
      4：存储并渲染

  增：
     1：创建一个新增弹框组件
     2：在父组件导入注册使用
     3：点击新增打开弹框
     4：弹框组件内的表单处理（布局，表单验证，表单数据等）
     5:定义新增api
     6:导入新增api
     7:点击确定在表单验证通过后调用api
       调用成功
         a:关闭弹框
         b:提示
         c:清空表单数据与验证
         d:刷新父级列表数据

  改：
    1：点击编辑打开弹框
    2：弹框内回显数据（深拷贝）
    3：弹框组件内定义一个mode变量用于区分场景
    4：新增与编辑打开弹框都要修改mode为相应值
    5：标题调整
    6：表单调整（表单验证，数据等调整）
    7：定义编辑api
    8:导入编辑api
    9:点击确定分场景调用api
       调用编辑成功
         a:关闭弹框
         b:提示
         c:清空表单数据与验证
         d:刷新父级列表数据

  删
    1：点击删除弹出确认框
    2：定义删除api
    3:导入删除api
    4:点击确认框确定按钮调用删除api
      调用成功
         a:提示
         b:刷新列表数据

  loading
    el-button   loading
    任意标签  v-loading

 -->

  <div class="departments">
    <el-card>
      <div
        v-loading="loading"
        class="main"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="top">
          <div class="name">传智教育</div>
          <div class="manager">负责人</div>
          <!-- el-dropdown
                  默认插槽
                  具名插槽dropdown
                     el-dropdown-menu
                        el-dropdown-item

          -->
          <el-dropdown>
            <div class="option">
              操作
              <i class="el-icon-arrow-down" />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="addEvent('')">添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-tree :data="list" class="mt">
          <!-- 知道插槽 -->
          <template #default="{data}">
            <div class="top" style="width:100%;">
              <div class="name">{{ data.name }}</div>
              <div class="manager">{{ data.manager }}</div>
              <el-dropdown>
                <div class="option">
                  操作
                  <i class="el-icon-arrow-down" />
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click.native="addEvent(data.id)">添加子部门</el-dropdown-item>
                    <el-dropdown-item @click.native="editEvent(data)">编辑部门</el-dropdown-item>
                    <el-dropdown-item @click.native="delEvent(data.id)">删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-tree>
      </div>

    </el-card>
    <!-- 新增弹框 -->
    <Add ref="add" :init-list="initList" @getData="getData" />
  </div>
</template>
<script>
import { companyDepartment, companyDepartmentDelete } from '@/api/departments'
import Add from './components/add.vue'
export default {
  components: {
    Add
  },
  data() {
    return {
      loading: false,
      list: [],
      initList: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async  getData() {
      this.loading = true
      try {
        const res = await companyDepartment()
        console.log('列表', res)
        this.initList = res.data.depts
        this.list = this.changeData(res.data.depts)
      } finally {
        this.loading = false
      }
    },
    // 树形数据转换
    changeData(arr, pid = '') {
      // 1:找出第一层数据
      // 2:将pid写成形参
      // 3:给找出的每一个项children=[]
      // 4:使用递归，找出每一个项的子集，子集的pid是自己的id
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 新增事件
    addEvent(pid) {
      // 打开弹框
      this.$refs.add.show = true
      // 修改弹框组件内的pid
      this.$refs.add.form.pid = pid
      // 修改mode为add
      this.$refs.add.mode = 'add'
    },
    // 删除事件
    delEvent(id) {
      this.$confirm('您确定删除该项吗?', '温馨提示').then(async() => {
        await companyDepartmentDelete(id)
        this.$message.success('删除部门成功')
        this.getData()
      }).catch(() => {})
    },
    editEvent(row) {
      // 打开弹框
      this.$refs.add.show = true
      // 数据回显
      // 深拷贝 JSON.parse(JSON.stringify(row))
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      // this.$refs.add.form = { ...row }
      // 修改mode为add
      this.$refs.add.mode = 'edit'
    }
  }
}
</script>
<style lang="scss" scoped>
.departments{
  padding:15px;
  .main{
    width:80%;
    margin: 30px auto;
    .top{
      display: flex;
      align-items: center;
      .name{
        flex:1;
      }
      .manager{
        width:120px;
      }
    }
  }
  .mt{
    margin-top: 20px;
  }

}
</style>
